<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="http://static.runoob.com/assets/foundation-icons/foundation-icons.css">
    <link rel="stylesheet" href="css/mi.css">
</head>
<style>

</style>
<body>
<div>
    <!--    固定导航-->
    <div id="fixed-nav">
        <div>
            <img src="img/1.png" alt="">
            <p>手机APP</p>
        </div>
        <div>
            <img src="img/2.png" alt="">
            <p>个人中心</p>
        </div>
        <div>
            <img src="img/3.png" alt="">
            <p>售后服务</p>
        </div>
        <div>
            <img src="img/4.png" alt="">
            <p>人工客服</p>
        </div>
        <div>
            <img src="img/5.png" alt="">
            <p>购物车</p>
        </div>
        <div  style="padding-top: 30px">
            <img src="img/6.png" alt="">
            <p><a href="#totop">回顶部</a></p>
        </div>
    </div>
    <!--        banner图-->
    <div id="banner">
        <img src="img/top.png" alt="">
    </div>
    <!--顶部导航栏-->
    <div id="top">
        <!--        左边-->
        <div id="top-left">
            <ul>
                <li id="totop"><a href="">小米商城</a></li>
                <li><a href="">MIUI</a></li>
                <li><a href="">loT</a></li>
                <li><a href="">云服务</a></li>
                <li><a href="">天星数科</a></li>
                <li><a href="">有品</a></li>
                <li><a href="">小爱开放平台</a></li>
                <li><a href="">企业团购</a></li>
                <li><a href="">资质证照</a></li>
                <li><a href="">协议规则</a></li>
                <li><a href="">下载app</a></li>
                <li><a href="">智能生活</a></li>
                <li><a href="">Select&nbsp;Location</a></li>
                <!--            </ul>-->
                <!--        </div>-->
                <!--        右边-->
                <!--        <div id="top-right">-->
                <!--            <ul>-->
                <li style="padding-left: 100px"><a href="">登录</a></li>
                <li><a href="">注册</a></li>
                <li><a href="">消息通知</a></li>
                <li><img src="img/5.png" alt="" style="width: 20%"><a href="">购物车(0)</a></li>
            </ul>
        </div>
    </div>
    <!--    主体内容1-->
    <div id="main1">
        <!-- 导航栏-->
        <div id="nav">
            <div id="nav-left">
                <ul>
                    <li class="img1"><a href=""><img src="img/mi-logo.png" alt=""></a></li>
                    <li class="img2"><a href=""><img src="img/mi.jpg" alt=""></a></li>
                    <li><a href="">小米手机</a></li>
                    <li><a href="">Redmi红米</a></li>
                    <li><a href="">电视</a></li>
                    <li><a href="">笔记本</a></li>
                    <li><a href="">家电</a></li>
                    <li><a href="">路由器</a></li>
                    <li><a href="">智能硬件</a></li>
                    <li><a href="">服务</a></li>
                    <li><a href="">社区</a></li>
                </ul>
            </div>
            <div id="nav-right">
                <input type="text">
                <button></button>
            </div>
        </div>
        <!--        轮播图-->
        <div id="carouse">

        </div>
        <!--        四张小图片-->
        <div>

        </div>
    </div>
    <!--    主体内容2-->
    <div id="main2">
        <!--        小米闪购-->
        <div></div>

        <!--        手机-->
        <div id="phone">
            <div id="phone-top1">
                <img src="img/top1.jpg" alt="">
            </div>
            <!--            左-->
            <div id="phone-top">
                <p style="float: left">手机</p>
                <a href="https://www.mi.com/?client_id=180100041080&masid=2110.0001" style="float: right">查看更多&nbsp;></a>
            </div>

            <div id="phone1">
                <div id="phone-left">
                    <a href=""><img src="img/shouji.jpg" alt=""></a>
                </div>
                <!--            右-->
                <div id="phone-right">
                    <div id="phone-right-top">
                        <div>
                            <img src="img/p1.jpg" alt="">
                            <p>Note&nbsp;9&nbsp;Pro</p>
                            <p>一亿像素夜景相机，120Hz六档变速...</p>
                            <p class="price">1599元起</p>
                        </div>
                        <div>
                            <img src="img/p2.jpg" alt="">
                            <p>Note&nbsp;9&nbsp;Pro</p>
                            <p>一亿像素夜景相机，120Hz六档变速...</p>
                            <p class="price">1599元起</p>
                        </div>
                        <div>
                            <img src="img/p3.jpg" alt="">
                            <p>Note&nbsp;9&nbsp;Pro</p>
                            <p>一亿像素夜景相机，120Hz六档变速...</p>
                            <p class="price">1599元起</p>
                        </div>
                        <div>
                            <img src="img/p4.jpg" alt="">
                            <p>Note&nbsp;9&nbsp;Pro</p>
                            <p>一亿像素夜景相机，120Hz六档变速...</p>
                            <p class="price">1599元起</p>
                        </div>
                    </div>

                    <div id="phone-right-buttom">
                        <div>
                            <img src="img/p5.jpg" alt="">
                            <p>Note&nbsp;9&nbsp;Pro</p>
                            <p>一亿像素夜景相机，120Hz六档变速...</p>
                            <p class="price">1599元起</p>
                        </div>
                        <div>
                            <img src="img/p6.jpg" alt="">
                            <p>Note&nbsp;9&nbsp;Pro</p>
                            <p>一亿像素夜景相机，120Hz六档变速...</p>
                            <p class="price">1599元起</p>
                        </div>
                        <div>
                            <img src="img/p7.jpg" alt="">
                            <p>Note&nbsp;9&nbsp;Pro</p>
                            <p>一亿像素夜景相机，120Hz六档变速...</p>
                            <p class="price">1599元起</p>
                        </div>
                        <div>
                            <img src="img/p8.jpg" alt="">
                            <p>Note&nbsp;9&nbsp;Pro</p>
                            <p>一亿像素夜景相机，120Hz六档变速...</p>
                            <p class="price">1599元起</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--        家电-->
        <div id="appliance">
            <div id="appliance-top1">
                <img src="img/appliance.jpg" alt="">
            </div>
        </div>
    </div>
    <!--    底部-->
    <div id="footer">
        <div id="footer-ul">
            <ul>
                <li><a href=""><i class="fi-wrench" style="font-size: 34px;padding-right: 10px"></i>预约维修服务</a></li>
                <li><a href=""><span style="font-size: 20px;padding-right: 10px;padding-left: 16px;padding-right: 16px">7</span>7天无理由退货</a>
                </li>
                <li><a href=""><span style="font-size: 20px;padding-right: 10px">15</span>15免费换货</a></li>
                <li><a href=""><i class="fi-shopping-bag" style="font-size: 34px;padding-right: 10px"></i>满99元包邮</a>
                </li>
                <li><a href=""><i class="fi-marker" style="font-size: 34px;padding-right: 10px"></i>520余家售后服务</a></li>
            </ul>
        </div>
        <div id="footer-buttom">
            <div id="footer-table">
                <table>
                    <tr id="tr1">
                        <td><a href="">帮助中心</a></td>
                        <td><a href="">服务支持</a></td>
                        <td><a href="">线下门店</a></td>
                        <td><a href="">关于小米</a></td>
                        <td><a href="">关注我们</a></td>
                        <td><a href="">特色服务</a></td>
                    </tr>
                    <tr>
                        <td><a href="">账户管理</a></td>
                        <td><a href="">售后政策</a></td>
                        <td><a href="">小米之家</a></td>
                        <td><a href="">了解小米</a></td>
                        <td><a href="">新浪微博</a></td>
                        <td><a href="">F码通道</a></td>
                    </tr>
                    <tr>
                        <td><a href="">购物指南</a></td>
                        <td><a href="">自助服务</a></td>
                        <td><a href="">服务网点</a></td>
                        <td><a href="">加入小米</a></td>
                        <td><a href="">官方微信</a></td>
                        <td><a href="">礼物码</a></td>
                    </tr>
                    <tr>
                        <td><a href="">订单操作</a></td>
                        <td><a href="">相关下载</a></td>
                        <td><a href="">授权体验店</a></td>
                        <td><a href="">投资者关系</a></td>
                        <td><a href="">联系我们</a></td>
                        <td><a href="">防伪查询</a></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td><a href="">企业社会责任</a></td>
                        <td><a href="">公益基金会</a></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td><a href="">廉洁举报</a></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
            </div>
            <div id="footer-contact">
                <h3>400-100-5678</h3>
                <p>8:00-18:00（仅收市话费）</p>
                <button>人工客服</button>
                <p>关注小米</p>
            </div>
        </div>
    </div>
    <!--    协议-->
    <div></div>

</div>
</body>
</html>